<template>
  <div class="big">
    <div class="body">
      <div style="display: flow-root;">
        <!-- 左 -->
        <div class="left">
          <!-- 左上 -->
            <div class="demo-collapse left-top active" >
              <el-collapse >
                  <el-collapse-item   title="练习室" >
                      <div class="mydance">
                        <router-link to="/trainingRoom/practice"><span @click="">我的练习室</span></router-link>
                      </div>
                  </el-collapse-item>
              </el-collapse>
            </div>

            <!-- 左下 -->
            <div class="left-lower">
              <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="vertical"
                :ellipsis="false"
                @select="handleSelect"
              >
                <el-menu-item index="0">
                  <RouterLink to="/trainingRoom/practice">缓存</RouterLink>
                </el-menu-item>
                <el-menu-item index="3">音频库</el-menu-item>
                <el-menu-item index="2">收藏</el-menu-item>
                <el-menu-item index="1"><RouterLink to="/trainingRoom/history">历史</RouterLink></el-menu-item>
              </el-menu>
            </div>
        </div>


        <!-- 右 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  export default {
    name:'TrainingRoom'
  }
</script>

<script setup lang="ts">
import { ref } from 'vue';

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}


</script>

<style lang="scss" scoped>
.big{
  width: 100%;
  height: 100%;
  display: flow-root;
  background-color: rgb(248, 246, 246);
}
.body{ 
  width: 1200px;
  margin: 0 auto;
  padding: 10px 0 0 0;
  height: 100%;
  display: flow-root;
  // background: #a07989;
 
}
.left{

  width: 16%;
  float: left;
  margin-right: 12px;
  display: flow-root;
  .left-top{
    border-radius: 5px;
    padding:0 5px  10px 20px; 
    background-color: #fff;
    position: relative;
    .mydance{
      margin-left: 40px;
      span{
        color: #F93684;
      }
    }
  }
  .left-top::before{
    position: absolute;
    top: 10px;
    left: 0px;
    content: '';
    height: 25px;
  }
  .left-top .active::before{
    border: 2px solid #F93684;
  }
  .left-top:hover::before{
    border: 2px solid #F93684;
  }
  .left-lower{
    margin-top: 10px;
    background-color: #fff;
    border-radius: 5px;
    .one{
      position: relative;
    }
    .one:hover::after{
      content: '';
      position: absolute;
      top: 13px;
      left: 0px;
      width: 1px;
      height: 25px;
      border: 2px solid #F93684;
    }
    div{
      font-size: 14px;
      padding: 16px;
    }
  }
}

 .el-collapse{
  border-top:none;
}

:deep( .el-collapse-item__wrap){
  border-bottom:none;
}
:deep( .el-collapse-item__header){
  border-bottom:none;
}
:deep( .el-collapse-item__content){
  padding-bottom:0;
}

.el-tree-node__label{
  color:#F93684;
}
.el-menu--vertical{
  border-right:none;
}
 .el-menu--vertical .el-menu-item{
  border-left:2px  ;
}
.el-menu-item{
  position: relative;

}
.el-menu-item::before{
  content: " ";
  position: absolute;
  left: 0px;
  width: 4px;
  height: 37px; 
}
.el-menu-item:hover:before{
  background-color: #F93684;
}
:deep( .el-menu--vertical .el-menu-item:hover){
  background-color: #fff !important;
}
.el-menu-item.is-active{
  color: black;
}
.el-menu-item.is-active::before{
  background-color: #F93684
}

</style>